<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-11 08:58:43
 * @LastEditTime: 2019-09-11 12:02:45
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="container">
    <img src="/static/images/back_achi.png" class="backImg" alt>
    <img src="/static/images/success.png" alt class="header" v-if="isSuccess">
    <img src="/static/images/loser.png" alt class="header" v-else>
    <div class="erlow">
      <div class="name">{{name}}同学</div>
      <img src="/static/images/success1.png" alt class="status" v-if="isSuccess">
      <img src="/static/images/loser1.png" alt class="status" v-else>
      <div class="text">
        <!-- 正确率补位零的时候 -->
        <div v-if="zql>'0%'">
          <p>正确率 <span>{{zql}}</span></p>
          <p>
            您打败了
            <span>{{inter}}</span>的竞争对手
          </p>
          <!-- <p>
            打败竞争对手，保底打败
            <span>50%</span>
            的竞争对手在{{years}}的中考，您可以进入如下高中：
          </p> -->
          <p>在{{years}}的中考，您可以进入如下高中：</p>
        </div>
        <!-- 正确率为零的时候 -->
        <div v-else>
          <!-- <p style="color:red;margin-bottom:0px !important">正确率 0</p> -->
          <p>很遗憾</p>
          <p>您的正确率为<span>0</span></p>
          <p>您的排名低于<span>50%</span>的竞争对手</p>
          <p>即便在那个年代,您也要努力才能考到好高中啊！！</p>
        </div>
        <div class="school" v-if="zql>'0%'">
          <block v-for="(item,index) in schoolText" :key="index">
            <p>{{item}}</p>
          </block>
        </div>
      </div>
      <img src="/static/images/footer_achi.png" alt class="footer">
      <div class="toPlay" @click="toPlay"></div>
    </div>

    <!-- 海报海报 -->
    <div class="canvas">
      <canvas canvas-id="shareCanvas" :style="{width:windowWidth+'px',height:windowHeight+'px'}"></canvas>
    </div>

  </div>
</template>

<script>
let apis = require('../../utils/api.js').default
export default {
  data() {
    return {
      inter: 0,
      isSuccess: false,
      years: '----',
      zql: "--",
      windowHeight: "",
      windowWidth: "",
      schoolNum: 0,
      schoolText: [],
      name:''
    };
  },
  onLoad(options) {
    const _this = this
    let rate = options.right;//正确的题目数量
    let zql = options.zql //正确率
    let ans = options.ans.replace(/!/g,'=')//正确的str值
    console.log(rate,zql,ans)
    this.$set(this,'years',wx.getStorageSync("zkz").years||'默认年份')
    this.$set(this,'name',wx.getStorageSync("zkz").name||'默认名字')
    apis.achievement({
      qId : 1,
      right : rate,
      userId : wx.getStorageSync('userInfo').userId,
      result:ans
    },function(res){
      console.log(res)
      _this.$set(_this,'schoolText',res.school)
      _this.$set(_this,'schoolNum',res.school.length)
      _this.$set(_this,'inter',res.result)
      if (zql > 0) {
        // 大于等于0分的时候成功
        _this.$set(_this, "isSuccess", true);
      } else {
        _this.$set(_this, "isSuccess", false);
      }
      _this.$set(_this,'zql',zql*100+'%')
    })
    

    // 开始绘图
  },

  methods: {
    // 检查授权
    checkSet(){
      wx.getSetting({
        success(res) {
          console.log(res)
          if(res.authSetting['scope.writePhotosAlbum'] == false){
            // 跳转到授权页面
              wx.showModal({
              title: '提示',
              content: '请打开相册授权权限，并重新保存',
              success(res) {
                if (res.confirm) {
                  wx.openSetting({
                    success(res) {
                      console.log(res.authSetting)
                    }
                    })
                  } else if (res.cancel) {
                }
              }
            })
          }
        }
      })
        
    },
    // 开始画图
    toPlay(){
        wx.showLoading({
            title: '系统处理中~',
        })
        if(this.zql>'0%'){
            this.ls_drawImg();
        }else{
            console.log(2)
            this.ls_draw_fail()
        }
    },
    // 保存图片
    saveCanvasImage: function saveCanvasImage(tempFilePath) {
      const _this = this
      wx.saveImageToPhotosAlbum({
        filePath: tempFilePath,
        success: function success(res) {
          wx.hideLoading()
          wx.showModal({
            title: "存图成功",
            content: "图片成功保存到相册了，可以分享到朋友圈了",
            showCancel: false,
            confirmText: "好的",
            confirmColor: "#a78845",
            success: function success(res) {
              if (res.confirm) {
                console.log("用户点击确定");
              }
            }
          });
        },
        fail: function fail(res) {
          console.log("fail11");
          wx.hideLoading()
          _this.checkSet()
        }
      });
    },

    ls_drawImg() {
        var _this = this;
        var ctx = wx.createCanvasContext("shareCanvas");
        _this.windowWidth = 750 / 2;
        _this.windowHeight = (750 + 506 + 50*_this.schoolNum) / 2;

        var winW = _this.windowWidth;
        var winH = _this.windowHeight;

        wx.getImageInfo({
            src: apis.imgUrl+"/back_achi.png",
            success: function success(res) {
            ctx.drawImage(res.path, 0, 0, winW, winH+500,100,100);
            ctx.draw();
            wx.getImageInfo({
                src: _this.isSuccess?apis.imgUrl+'/success.png':apis.imgUrl+'/loser.png',
                success: function success(res) {

                ctx.drawImage(
                    res.path,
                    (winW - (winW - 30)) / 2,
                    0,
                    winW - 30,
                    199
                );
                ctx.draw(true);

                ctx.setFillStyle("#fff");
                ctx.fillRect(
                    (winW - (winW - 30)) / 2,
                    199,
                    winW - 30,
                    260 + _this.schoolNum * 25
                );

                // 不变的字
                ctx.font = "25px bold kktt";
                ctx.setFillStyle("#000");
                ctx.setTextAlign('center')
                ctx.fillText(_this.name+'同学', 375/2,240);
                ctx.setTextAlign('left')
                ctx.font = "15px bold kktt";
                ctx.fillText("正确率", winW - (winW - 30), winH - (winH - 340));
                ctx.fillText(
                    "你打败了                  的竞争对手",
                    winW - (winW - 30),
                    winH - (winH - 370)
                );

                ctx.fillText(
                    "在                   的中考，你可以进入如下高中:",
                    winW - (winW - 30),
                    winH - (winH - 393.5)
                );

                //绘制学校
                var schoolHeight = 420;
                _this.schoolText.forEach((item, index) => {
                    if (index % 2 == 0) {
                    ctx.setFillStyle("#ed3939");
                    } else {
                    ctx.setFillStyle("#3332c7");
                    }
                    ctx.fillText(item, 30, schoolHeight); 
                    schoolHeight += 25;
                });

                // 变的字
                ctx.font = "20px bold kktt";
                ctx.setFillStyle("#ed3939");
                ctx.fillText(_this.zql, 80, 340);
                ctx.fillText(_this.inter, 90, 370);
                // ctx.fillText("50%", 190, 350);
                ctx.fillText(_this.years, 50, 395);
                ctx.draw(true);
                
                // 画底部区域
                wx.getImageInfo({
                    src: apis.imgUrl+"/footer_achi.png",
                    success: function success(res) {
                    ctx.drawImage(
                        res.path,
                        (30) / 2,
                        winH-180,
                        345,
                        157
                    );
                    ctx.draw(true,function(){
                        // 画输赢
                        wx.getImageInfo({
                            // src: apis.imgUrl+"/success1.png",
                            src:_this.isSuccess?apis.imgUrl+'/success1.png':apis.imgUrl+'/loser1.png',
                            success: function success(res) {
                            ctx.drawImage(res.path, 60, 250, 258, 53);
                            ctx.draw(true, function() {
                                wx.canvasToTempFilePath({
                                width: winW,
                                height: winH,
                                canvasId: "shareCanvas",
                                quality: 1,
                                success: function success(res) {
                                    _this.saveCanvasImage(res.tempFilePath);
                                },
                                fail: function fail() {
                                    console.log("canvasToTempFilePath fail");
                                }
                                });
                            });
                            }
                        });
                        // 画输赢结束
                    })
                    }
                });
                // 底部区域结束
                }
            });
            }
        });
    },

    ls_draw_fail(){
      
      var _this = this;
      var ctx = wx.createCanvasContext("shareCanvas");
      _this.windowWidth = 750 / 2;
      _this.windowHeight = (750 + 356 + 50*_this.schoolNum) / 2;

      var winW = _this.windowWidth;
      var winH = _this.windowHeight;

      wx.getImageInfo({
        src: apis.imgUrl+"/back_achi.png",
        success: function success(res) {
          ctx.drawImage(res.path, 0, 0, winW, winH,100,100);
          ctx.draw();
          wx.getImageInfo({
            src: apis.imgUrl+'/loser.png',
            success: function success(res) {
              ctx.drawImage(
                res.path,
                15,
                0,
                winW - 30,
                199
              );
              ctx.draw(true);

              ctx.setFillStyle("#fff");
              ctx.fillRect(
                15,
                199,
                winW - 30,
                260 + _this.schoolNum * 25
              );

              // 不变的字
              ctx.font = "25px bold kktt";
              ctx.setFillStyle("#000");
              // ctx.fillText("正确率", 30,300);
               ctx.setTextAlign('center')
              ctx.fillText(_this.name+'同学', 375/2,240);
              ctx.setTextAlign('left')
              ctx.font = "15px bold kktt";
              ctx.fillText("很遗憾", 30,330);
              ctx.fillText("您的正确率为", 30,360);
              ctx.fillText("您的排名低于          的竞争对手", 30,390);
              ctx.fillText("即便在那个年代,您也要努力才能考到好高中啊！！", 30,420);

              // 变的字
              ctx.font = "20px bold kktt";
              ctx.setFillStyle("#ed3939");
              // ctx.fillText('正确率 0', 30, 300);
              ctx.fillText(' 0', 120, 362);
              ctx.fillText("50%", 120, 393);
              ctx.draw(true);

              
              // 画底部区域
              wx.getImageInfo({
                src: apis.imgUrl+"/footer_achi.png",
                success: function success(res) {
                  ctx.drawImage(
                    res.path,
                    (30) / 2,
                    winH-180,
                    345,
                    157
                  );
                  ctx.draw(true,function(){
                      // 画输赢
                      wx.getImageInfo({
                        // src: apis.imgUrl+"/success1.png",
                        src:apis.imgUrl+'/loser1.png',
                        success: function success(res) {
                          ctx.drawImage(res.path, 60, 230, 258, 63);
                          ctx.draw(true, function() {
                            wx.canvasToTempFilePath({
                              width: winW,
                              height: winH,
                              canvasId: "shareCanvas",
                              quality: 1,
                              success: function success(res) {
                                _this.saveCanvasImage(res.tempFilePath);
                              },
                              fail: function fail() {
                                console.log("canvasToTempFilePath fail");
                              }
                            });
                          });
                        }
                      });
                      // 画输赢结束
                  })
                }
              });
              // 底部区域结束
            }
          });
        }
      })
    }
  }
};
</script>



<style lang="less" scoped>
.container {
  min-height: 100vh;
  text-align: center;
  font-size: 0px;
  position: relative;
  font-family: kktt;
  .backImg {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    position: absolute;
    left: 0px;
    top: 0px;
  }
  .erlow{
    position: relative;
  }
  .name{
    // position: absolute;
    // top:-60rpx;
    // left: 50%;
    text-align: center;
    line-height: 80rpx;
    font-weight:bold; 
    font-size: 52rpx;
    border-radius:20rpx;
    color:#070707;
    font-family: '黑体';
    margin-top: 32rpx;
  }
  .header {
    width: 703rpx;
    height: 375rpx;
    position: relative;
  }
  > div {
    width: 655rpx;
    background: white;
    font-size: 30rpx;
    display: inline-block;
    position: relative;
    bottom: 60rpx;
    > .status {
      width: 358rpx;
      height: 83rpx;
      // margin-top: 48rpx;
    }
    > .text {
      display: block;
      text-align: left;
      box-sizing: border-box;
      padding: 0 48rpx;
      line-height: 48rpx;
      p {
        &:first-child {
          margin-bottom: 10rpx;
        }
        span {
          font-size: 1.2em;
          color: #ed3939;
        }
      }
    }
    .school {
      font-family: '黑体';
      margin-top: 10rpx;
      margin-bottom: 20rpx;
      text-align: left;
      box-sizing: border-box;
      // padding: 0 48rpx;
      line-height: 48rpx;
      p:nth-child(odd) {
        color: #ed3939;
      }
      p:nth-child(even) {
        color: #3332c7;
      }
      p{
        margin-bottom:0px !important;
      }
    }
    > .footer {
      width: 655rpx;
      height: 413rpx;
    }
    >.toPlay{
      position: absolute;
      background: transparent;
      width: 100%;
      height:100rpx;
      bottom:312rpx;
    }
  }
  .canvas {
    width:0px;height:0px;overflow:hidden;
    z-index:-1;
  }
}
</style>

<style lang="wxss">
page {
  height: 100%;
}
</style>


